<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ul class="search-result">
    <!-- 由于heroes$异步信息流，所以要用async管道进行值等待 -->
    <li *ngFor="let hero of heroes$ | async">
      <a routerLink="/detail/{{ hero.id }}">
        {{ hero.name }}
      </a>
    </li>
  </ul>
</div>
